<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import type { FormProps } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'


const labelPosition = ref<FormProps['labelPosition']>('right')
// const value = ref('')
const formRef = ref()
const formLabelAlign = ref({
    userID: "",
    coin: '',
    money: '',
})


const rules = {
    userID: [
        { required: true, message: '请输入UserId', trigger: 'blur' },
        // {
        //     pattern: /^\S{1,10}$/,
        //     message: '分类名必须是 1-10 位的非空字符',
        //     trigger: 'blur'
        // }
    ]
}
const chongzhi = async () => {
    console.log(formRef.value)
    if (!formRef.value) return;
    try {
        await formRef.value.validate()
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
    })
    axios.post("chongzhi/", formLabelAlign.value)
        .then((res: any) => {
            console.log(formLabelAlign.value.userID);
            console.log(typeof formLabelAlign.value.coin);
            console.log(typeof formLabelAlign.value.money);

            loading.close()
            ElMessage({
                message: res.data.message,
                type: 'success',
                showClose: true,
            })
        })
        .catch((error: any) => {
            loading.close()
            ElMessage({
                message: '充值失败， 重试一下看看~~~',
                type: 'error',
            })
            console.error(error);
        });
    } catch (error) {
        
    }
    

}
</script>



<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="color: #ffffff;">591快捷充值</span>
            </div>
        </template>

        <el-row style="margin-top: 30px;">
            <el-col :span="8" :offset="8">
                <el-form :label-position="labelPosition" label-width="200px" ref="formRef" :rules="rules" :model="formLabelAlign"
                    style="max-width: 100%">
                    <el-form-item label="用户ID：" prop="userID">
                        <el-input v-model="formLabelAlign.userID" placeholder="" />
                    </el-form-item>
                    <el-form-item label="加值币：" prop="uname">
                        <el-input v-model="formLabelAlign.coin" placeholder="输入要充值的加值币金额" />
                    </el-form-item>
                    <el-form-item label="点数：" prop="pwd">
                        <el-input v-model="formLabelAlign.money" placeholder="输入要充值的点数" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click.prevent="chongzhi">充值</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>


<style ></style>